import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getCardInfo, addCard } from '@/services/supplier/withdraw/setCard'

const SetCard = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [cardInfo, setCardInfo] = useState({})

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getCardInfos()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Form.Item label="名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
        {getFieldDecorator('id', {})
          (<Input />)}
      </Form.Item>
    )
  }
  // 按钮处理
  const handleBtn = async type => {
    switch (type) {
      case 1:
        await addCards()
        break
    }
  }
  // 获取银行卡信息
  const getCardInfos = async () => {
    let res = await getCardInfo()
    if (res.code === '0') {
      setCardInfo(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 添加银行卡
  const addCards = () => {
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        storeBankCard: values
      }
      let res = await addCard(params)
      if (res.code === '0') {
        alert(res.msg)
      } else {
        alert(res.msg)
      }
    })
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Form>
        <Form.Item label="所属银行" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
          {getFieldDecorator('bankCard', {})
            (<Input />)}
        </Form.Item>
        <Form.Item label="姓名" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
          {getFieldDecorator('name', {})
            (<Input />)}
        </Form.Item>
        <Form.Item label="银行卡号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
          {getFieldDecorator('cardNo', {})
            (<Input />)}
        </Form.Item>
        <Form.Item label="身份证号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
          {getFieldDecorator('pid', {})
            (<Input />)}
        </Form.Item>
        <Form.Item label="联系方式" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
          {getFieldDecorator('phone', {})
            (<Input />)}
        </Form.Item>
      </Form>
   </PageHeaderWrapper>
  )
}

export default Form.create()(SetCard)
